<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box img {
            position: absolute;
            height: 100px;
            border: 1px solid mediumpurple;
            padding: 5px;

        }
        #box img:hover {
            transform: scale(2.5);
            z-index: 9999;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var imgs = [
        'images/1.jpg',
        'images/2.jpg',
        'images/3.jpg',
        'images/4.jpg',
        'images/5.jpg',
        'images/6.jpg',
        'images/7.jpg',
        'images/8.jpg',
        'images/9.jpg',
        'images/10.jpg',
        'images/11.jpg',
        'images/12.jpg',
        'images/13.jpg',
        'images/14.jpg',
        'images/15.jpg',
        'images/16.jpg'
    ];
    s = '';
    var colors = [
        'blue',
        'green',
        'red',
        'yellow',
        'black'
    ];
    for (var i in imgs){
        var pLeft = Math.random()*1080;
        var pTop = Math.random()*800;
        var z = Math.round(Math.random()*1000);
        var currentColor = colors[Math.floor(Math.random()*colors.length)];
        s = s + '<img src="'+imgs[i]+'" style="left:'+pLeft+'px;top:'+pTop+'px;z-index: '+ z +'; background-color: '+ currentColor +';">';
    }
    var o = document.getElementById('box');
    o.innerHTML = s;
</script>
<img src="" style="">
</body>
</html>